<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>北京西大校友产业生态圈联盟</title>

		<meta name="description" content="User login page" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="/static/ace/assets/css/bootstrap.css" />
		<link rel="stylesheet" href="/static/ace/components/font-awesome/css/font-awesome.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="/static/ace/assets/css/ace-fonts.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="/static/ace/assets/css/ace.css" />


		<script src="/static/js/echarts.min.js"></script>
		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="/static/ace/assets/css/ace-ie.css" />
		<![endif]-->

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="/static/ace/components/html5shiv/dist/html5shiv.min.js"></script>
		<script src="/static/ace/components/respond/dest/respond.min.js"></script>
		<![endif]-->
	</head>

	<body >
		<div class="main-container">
			<div class="main-content">

			<div style="padding-left: 18%;padding-right: 18%;padding-top: 40px;">
				<img width="140px" src="/static/logo.jpg">
				<span class=" lighter blue" style="font-size: 36px;">
						&nbsp;&nbsp;&nbsp;&nbsp;北京西大校友产业生态圈联盟
				</span>
			</div>

				<div class="row">
					<div class="col-xs-6" style="padding-left: 300px;padding-right: 300px;padding-top: 20px;">
							<div id="barchart" style="width: 600px;height:400px;"></div>
							<script type="text/javascript">
								// 基于准备好的dom，初始化echarts实例
								var barChart = echarts.init(document.getElementById('barchart'));
								option = {
									  title : {text: '系统注册用户行业分布'},
										color: ['#3398DB'],
										tooltip : {
												trigger: 'axis',
												axisPointer : {            // 坐标轴指示器，坐标轴触发有效
														type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
												}
										},
										grid: {
												left: '3%',
												right: '4%',
												bottom: '3%',
												containLabel: true
										},
										xAxis : [
												{
														type : 'category',
														data : ['金融/教育/企业服务', '机械/电子/汽车/五金', '食品/烟酒/医药/美容', '房产/建筑/餐饮/旅游/招商', '粮食/畜牧/养殖/花卉/苗木'
														, 'IT/互联网/广告/文化/传媒/演艺', '家居/纺织/消防/运输', '协会/组织/校友/战友/兴趣/联盟', '其他行业'],
														axisTick: {
																alignWithLabel: true
														}
												}
										],
										yAxis : [
												{
														type : 'value'
												}
										],
										series : [
												{
														name:'当前注册人数',
														type:'bar',
														barWidth: '60%',
														data:[10, 52, 20, 33, 70, 52, 20, 33, 70]
												}
										]
								};
								// 使用刚指定的配置项和数据显示图表。
								barChart.setOption(option);
							</script>
					</div>
						<div class="col-xs-5" style="padding-top:100px;margin-left: 100px;padding-left:50px;">
								<div class="step-pane active widget-box" style="width:364px;padding:30px 50px 25px 65px">
										<div class="form-horizontal" >
												<div class="form-group ">
														<div class="col-xs-12 col-sm-9">
																<div class="input-group" style="font-weight: bold">
																		用户登录
																</div>
														</div>
													</div>
											<div class="form-group ">
													<div class="col-xs-12 col-sm-9">
															<div class="input-group">
																	<span class="input-group-addon">
																		<i class="ace-icon fa fa-phone"></i>
																	</span>
																	<input style="width:200px" type="tel" id="mobile" name="mobile" />
															</div>
													</div>
												</div>

							<div class="space-10"></div>

							<div class="form-group">
								<div class="col-xs-12 col-sm-9">
									<div class="input-group ">
										<span class="input-group-addon">
											<i class="ace-icon fa fa-lock"></i>
										</span>
										<input style="width:200px" type="password" id="password" name="password" />
									</div>
								</div>
							</div>
							
							<div class="space-18"></div>
							<div class="form-group">
								<div class="col-xs-12 col-sm-9">
									<button  class="btn btn-info" style="width:235px" onclick="login()" id="login">
											登录
									</button>
								</div>
							</div>
							<div class="pull-right">
								<a href="/user/forgetpassword" tabindex="6" target="_blank">
									忘记密码</a>
									&nbsp;&nbsp;
								<a href="/user/register" class="register" target="_blank" >立即注册</a>
								</div>
							</div>
					</div>
				</div>
			</div><!-- /.row -->
			</div><!-- /.main-content -->
		</div><!-- /.main-container -->
		<script src="/static/ace/components/jquery/dist/jquery.js"></script>
		<script src="/static/js/md5.js"></script>
		<script type="text/javascript">
		login = () => {
			if(($('#mobile').val()).trim() === "" || ($('#password').val()).trim() === ""){
				alert("请输入用户名或密码");
				return;
			}
			var payload = {
				mobile: $('#mobile').val(),
				password: $('#password').val()
			};
			var opts = {
				method: 'POST',
				body: JSON.stringify(payload),
				headers: {
					'Content-Type': 'application/json'
				}
			};
			console.log(JSON.stringify(payload));
			let url = '/api/user/login';
			$.post(url, JSON.stringify(payload), function(resultJSONObject){
			console.log(resultJSONObject);
			console.log(resultJSONObject["id"]);
			if (resultJSONObject["mobile"] == "18888888888") {
				location.href = "/admin/user/list";
			} else {
				location.href = "/user/userinfo/" + resultJSONObject["id"];
			}
			
		},"json");
		}
		// fetch(url, opts)
		// 	.then(
		// 		function(res) {
		// 			console.log(res);
		// 			console.log(res.ok);
		// 			console.log(responseData.id);
		// 			// 返回的responseData中没有id
		// 			if (res.ok == true) {
		// 				$.cookie('user', 'loggined');
		// 				console.log("login success!");
		// 				//成功之后
		// 				localtion.href = "/user/userinfo/"+responseData.id;
		// 				return res.json();		
		// 			} else if (res.status === 500) {
		// 				alert("密码错误");
		// 			} else if (res.status === 404) {
		// 				alert("用户未注册");
		// 			}
		// 		},
		// 		function(e) {
		// 		}
		// 	).then(resonseData => {
		// 		if (resonseData.id) {
		// 			if (resonseData.mobile == "18888888888") {
		// 			window.location.href = "/admin/user/dashboard";
		// 			}else{
		// 				$.cookie('user', 'loggined');
		// 				window.location.href = "/user/userinfo/"+resonseData.id;
		// 			}
		// 		}
		// 	})
		// 	.catch(error => {
		// 	});
		// }

		// submitData = () => {
		// 	// alert(hex_md5($('#password').val()));
		// 	if (!/^1(3|4|5|7|8|6|9)\d{9}$/.test($('#mobile').val()) || ($('#mobile').val()).trim()==""){
		// 		alert("请输入正确手机号");
		// 		return
		// 	}
		// 	if (($('#password').val()).trim()==""){
		// 		alert("请输入密码");
		// 		return
		// 	}
		// 	var payload = {
		// 		mobile: $('#mobile').val(),
		// 		password: hex_md5($('#password').val())
		// 	};
		// 	var opts = {
		// 		method: 'POST',
		// 		body: JSON.stringify(payload),
		// 		headers: {
		// 			'Content-Type': 'application/json'
		// 		}
		// 	};
		// 	console.log(JSON.stringify(payload));
		// 	let url = '/api/user/add';
		// 	fetch(url, opts)
		// 		.then(
		// 			function(res) {
		// 				// if (res.ok) {
		// 				if (res.status == 200){
		// 					//成功之后
		// 					$.cookie('user', 'loggined');
		// 					//成功之后
		// 					localtion.href = "/user/userinfo/" + responseData.id;
		// 				   return res.json();
		// 				} else if (res.status === 500) {
							
		// 				} else if (res.status === 406) {
		// 					alert("该手机号已注册请返回登录");
		// 				}
		// 			},
		// 			function(e) {
		// 			}
		// 		).then(resonseData => {
		// 			if (resonseData) {
		// 				window.location.href = "/user/userinfo/"+resonseData.id;
		// 			}
		// 		})
		// 		.catch(error => {
		// 		});
		// 	}
		</script>

	</body>
</html>
